<template>
	<view style="height: 100vh;background-color: #f7f7f7;">
		<scroll-view scroll-y="true" class="contsss" :show-scrollbar="true" style="
		 height:100vh ">
			<view class="" style="height: 25upx;" v-if="array.length>0">

			</view>
			<view class="home_2y" v-for="(item,index) in array" :key="index" v-if="array.length>0">
				<view class="home_2y_2">
					<text class="home_2y_2_1"></text><text class="home_2y_2_2">{{item.departTime}}</text>

				</view>
				<view class="home_2y_1">
					{{item.startStation}}
					<text class="iconfont icondanxiangzhuanhuan"
						style="color: #999;margin: 0 10upx;"></text>{{item.endStation}}
				</view>
				<view class="pingche">特 检</view>
				<view style="font-size: 28upx;color: #333;margin-top: 10upx;" v-if="item.unsoldSeats">余票：<text
						style="font-size:32upx;color:#4374eb ;padding-right: 18upx;font-weight: 500;">{{item.unsoldSeats||'0'}}</text>
				</view>
				<view class="home_2y_3">
					<text class="iconfont iconbangzhu"></text>验票过后将不可更改
					<view
						style="font-size:30upx;margin-left: auto;color: #fff;background-color:#4374eb;border-radius:40upx;height: 80upx;display: flex;align-items: center;justify-content: center;padding: 0 50upx;"
						@click="readArticle(item)">
						验 票
					</view>
				</view>
			</view>
			<view class="" v-if="array.length>5"
				style="padding-bottom: 18upx; font-size: 26upx;text-align: center;color: #666;">
				已经到底啦～
			</view>
			<view class="NoData" v-if="array.length==0">
				<view class="NoDataA">
					<image class="NoData_images" src="@/static/imge/zanwu.svg"></image>
				</view>
				<view class="NoData_texte1">
					亲，当前暂无活动内容
				</view>
				<view class="NoData_texte2">可以先看看别的哦～</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				array: [],
				form: {},
			}
		},
		onLoad: function(options) {
			var data = JSON.parse(decodeURIComponent(options.id))
			this.form = data
			this.reserveMask(this.form)
		},
		computed: {
			...mapState(['currentDate']),
		},
		methods: {
			...mapMutations(['getData', 'currentDateStr']),
			readArticle(e) {
				var that = this
				uni.showModal({
					title: '提示',
					content: '确认修改到' + e.departTime + '班次进行特检～',
					confirmText: '确定', // 自定义确定按钮的文字
					cancelText: '取消', // 自定义取消按钮的文字
					success: (res) => {
						if (res.confirm) {
							that.send(e)
						} else if (res.cancel) {

						}
					}
				});
			},
			send(e) {
				var that = this
				const obj = {
					url: "ddOrderInfo/save",
					data: {
						"id": this.form.id,
						"oldPlandateId": this.form.plandateId,
						"specialCheck": '1', //是否特检，不传或者传1为非特检
						"newPlandateId": e.platndateId,
						"status": 2,
						"iiFlag": '0'
					},
					success(res) {
						uni.showToast({
							title: '验票成功',
							duration: 3000,
							icon: 'none',
							success() {
								uni.navigateBack()
							}
						});
					},
					fail(res) {
						uni.showToast({
							title: res.msg,
							duration: 3000,
							icon: 'none'
						});
						console.log(res)
					},
					complete(res) {
						console.log(res)
					}
				};
				that.getData(obj);
			},
			reserveMask(e) {
				var that = this
				let objP = {
					plandateId: e.plandateId
				}
				const obj = {
					url: 'ddPlandate/querySpecialCheckList',
					data: objP,
					success(res) {
						that.array = res.datas

					},
					fail(res) {

					},
					complete(res) {}
				}
				that.getData(obj)
			},
		}
	}
</script>

<style scoped lang="scss">
	.natos {
		font-size: 28upx;
		height: 65upx;
		line-height: 65upx;
		background-color: #fff;
		display: flex;
		align-items: center;

		.natos1 {
			flex: none;
			width: 160upx;
			text-align: center;
		}

		.natos2 {
			flex: 1;
			text-align: center;

			.boxAys_1x {
				font-weight: 500;
				font-size: 38upx;
			}
		}

	}


	.right .center-right {
		border: 1px solid #3478f6;
		float: right;
		text-align: center;
		border-radius: 8rpx;
		color: #3478f6;
	}

	.view-schItem {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 100rpx;
		align-items: center;
		border-bottom: 1px solid #e4e4e4;
	}

	.view-sch {
		padding: 0 30rpx;
		margin-top: 30rpx;
	}

	.inner-vie {
		width: 20%;
	}

	.btn-item {
		width: 100%;
		height: 60rpx;
		font-size: 28rpx;
		line-height: 60rpx;
		justify-self: flex-end;
		color: #682e09;
		background-color: #fff;
		border: 1px solid #682e09;
	}

	.txt-nm {
		width: 40%;
		font-size: 28rpx;
		text-align: left;
	}

	.txt-del {
		width: 20%;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		font-size: 28rpx;
		line-height: 46rpx;
	}

	.center-right {
		display: flex;

		font-size: 28upx;
	}

	.home_2y {
		background-color: #fff;
		padding: 25upx 25upx;
		border-radius: 16upx;
		overflow: hidden;
		margin: 0 25upx;
		margin-bottom: 25upx;
		position: relative;

		.pingche {
			color: #fff;
			font-size: 22upx;
			margin-left: auto;
			background-color: orangered;
			height: 40upx;
			position: absolute;
			right: -50upx;
			top: 20upx;
			transform: rotate(45deg);
			width: 180upx;
			line-height: 40upx;
			text-align: center;
		}

		.home_2y_1 {
			font-size: 30upx;
			font-weight: 500;
			color: #333;
			display: flex;
			align-items: center;

			.iconzhuanhuan {
				margin: 0 10upx;
			}


		}

		.home_2y_2 {
			display: flex;
			align-items: center;
			margin-bottom: 10upx;

			.home_2y_2_1 {
				width: 16upx;
				height: 16upx;
				background: #61d34e;
				border-radius: 50%;
				border: 6upx solid #dff6dc;
				margin-right: 10upx;
			}

			.home_2y_2_2 {
				font-size: 36upx;
				color: #000;
				font-weight: 500;
			}
		}

		.home_2y_3 {
			display: flex;
			align-items: center;
			font-size: 26upx;
			color: #999;
		}
	}
</style>